<!-- 房源信息 -->
<template>
  <a-card
    style="height: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #title>
      <cu-icon class="icon-primary" type="org-lishuaichaxun" />
      {{title}}
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        v-permission="['contractList', 'curd', 'list']"
        @click="$utils.goMainRoute({name: 'contractList',})">更多&nbsp;&gt;</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div class="price-box">
        <div class="price-total">
          <div class="tips-square">
            <cu-icon class="tips-qian" type="org-24gf-bookmark" />
            {{tip}}
          </div>
        </div>
        <div class="price-chart">
          <div class="price-chart-item" v-for="(item, index) in list" :key="index">
            <div class="price-title">
              {{item.name}}
            </div>
            <div class="price-progress">
              <a-progress
                :percent="item.percent"
                :strokeWidth="18"
                :showInfo="false"
                status="normal"
                strokeColor="#6395fa"
                trailColor="#e5efff"
              />
              <a-tooltip placement="topLeft" :title="item.num + '套'">
                <div class="progress-info">
                  {{item.num}}套
                </div>
              </a-tooltip>

            </div>
          </div>
        </div>
      </div>
    </a-spin>

  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  reactive,
  toRefs,
} from "vue";
import request from "../../../common/utils/request";
import {message} from "ant-design-vue";
import store from "@/store";

export default defineComponent({
  name: "progressHouse",
  props: {
    houseType: {
      type: String,
      default: '',  // 租售 sale  收房 closed 续约 continue
    },
    title: {
      type: String,
      default: '',
    },
    tip: {
      type: String,
      default: '',
    },
    requestUrl: {
      type: String,
      default: '',
    }
  },
  components: {

  },
  setup(props, context) {
    const state = reactive({
      list: [
        {
          name: '今日',
          percent: 0,
          num: 0,
        },
        {
          name: '本周',
          percent: 0,
          num: 0,
        },
        {
          name: '本月',
          percent: 0,
          num: 0,
        },
      ],
      spinning: false,
      activeTab: '1',
      total: 0,
    })


    const getData = () => {
      state.spinning = true;
      let params = {
        uid: store.getters.userInfo.uid,
      };
      request.get("/org", props.requestUrl, params).then((res) => {
        state.list.forEach((item) => {
          let _num = 0;
          let _total = 0;
          if (item.name === '今日') {
            _num = res?.thisDay?.num || 0;
            _total = res?.thisDay?.totals || 0;
          }
          if (item.name === '本周') {
            _num = res?.thisWeek?.num || 0;
            _total = res?.thisWeek?.totals || 0;
          }
          if (item.name === '本月') {
            _num = res?.thisMonth?.num || 0;
            _total = res?.thisMonth?.totals || 0;
          }
          item.num = _num;
          item.percent = (_num / _total)*100;
        })
        state.spinning = false;
      }).catch((err) => {
        state.spinning = false;
      })
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.price-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .price-total {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: center;
    .tips-square {
      width: 52px;
      height: 52px;
      background-color: #86a7fc;
      border-radius: 14px;
      position: relative;
      color: #fff;
      font-size: 20px;
      padding-top: 12px;
      text-align: center;
      font-weight: bold;
      .tips-qian {
        position: absolute;
        font-size: 10px;
        color: #fff;
        top: 6px;
        left: 8px;
      }
    }
  }
  .price-chart {
    margin-top: 36px;
    margin-bottom: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-item {
      display: flex;
    }
  }
  .price-title {
    width: 40px;
  }
  .price-progress {
    flex: 1;
    display: flex;
  }
}
.progress-info {
  margin-left: 10px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
:deep(.ant-radio-button-wrapper:first-child) {
  border-radius: 28px 0 0 28px;
}
:deep(.ant-radio-button-wrapper:last-child) {
  border-radius: 0 28px 28px 0;
}
:deep(.ant-radio-button-wrapper) {
  padding: 0 8px;
}
</style>